<!-- 分享详情页 -->
<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar title="分享" left-arrow @click-left="arrow" />

    <!-- 标题 -->
    <van-cell
      :title="articleDetail.articleTitle"
      title-style="font-size:24px;font-weight: bolder;"
    />
    <!-- 头像信息 -->
    <van-cell-group class="personal">
      <van-image
        round
        width="72px"
        height="60px"
        :src="articleDetail.userInfo.avatar"
      />
      <!-- 姓名信息 -->
      <van-cell
        center
        :title="articleDetail.userInfo.nickname"
        :label="articleDetail.userInfo.introduction"
        title-style="font-size:19px"
      >
        <template #right-icon >
          <van-button v-if="follow"
            plain
            hairline
            size="small"
            icon="plus"
            color="#64C0DF"
            round
            @click="Follow"
            >关注</van-button
          >
          <van-button v-else
            plain
            hairline
            size="small"
            icon="success"
            color="red"
            round
            @click="Follow"
            >已关注</van-button
          >
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 内容 -->
    <div class="content">
      <p>{{articleDetail.articleContent}}</p>
      <img :src="url" alt="" />


    </div>
    <div class="time">
      <p>编辑于{{articleDetail.createTime}}禁止转载</p>
    </div>
    <div style="height: 50px"></div>
    <van-goods-action>
      <van-button type="default" size="large" round  @click="Like">
        <van-icon name="like-o"  v-if="flag"/>
        <van-icon name="like"  color="red" v-else/>
        {{articleDetail.articleLike}}
      </van-button>

<!--      <van-goods-action-icon  :text="articleDetail.articleCollection" @click="flag1=!flag1" >
        <van-icon name="star-o" v-if="flag1" />
        <van-icon name="star-o" color="yellow" v-else />
      </van-goods-action-icon>-->
      <van-goods-action-icon :icon="change" color="orange" :text="articleDetail.articleCollection" @click="Collection"/>

      <van-goods-action-icon icon="warn-o" color="orange" text="举报" @click="report"/>

      <van-goods-action-icon
        icon="chat-o"
        :text="articleDetail.articleComment"
        @click="showComment"
      />
<!--      <van-goods-action-icon
        icon="edit"
        text="写评论"
        @click="write_comment = true"
      />-->
      <van-goods-action-icon
        icon="share-o"
        :text="articleDetail.articleRetweetedarticleRetweeted"
        @click="show_Share = true"
      />
    </van-goods-action>

    <!-- 评论部分 -->
    <van-action-sheet v-model="comment" title="评论">
      <div>
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
          <!--      <van-image class="header-img" :size="40" src="https://img01.yzcdn.cn/vant/cat.jpeg"></van-image>-->
          <div style="display: flex;
                  justify-content: center;
                  align-items: center;">
            <van-image
                round
                width="2.5rem"
                height="2.5rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="reply-info" >
              <div
                  tabindex="0"
                  contenteditable="true"
                  id="replyInput"
                  spellcheck="false"
                  placeholder="输入评论..."
                  class="reply-input"
                  @focus="showReplyBtn"
                  @input="onDivInput($event)"
              >
              </div>
            </div>
          </div>
          <div class="reply-btn-box" v-show="btnShow">
            <van-button class="reply-btn" size="small" @click="sendComment" type="info">发表评论</van-button>
          </div>
        </div>
        <div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
          <!--      <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>-->
          <van-image
              round
              width="2.5rem"
              height="2.5rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="author-info">
            <span class="author-name">{{item.nickname}}</span>
            <span class="author-time">{{item.commontTime}}</span>
          </div>
          <div class="icon-btn">
            <span @click="showReplyInput(i,item.nickname,item.commentId)" style="padding-right: 2px">
              <van-icon name="chat-o" />{{item.replayNum}}
            </span>
            <van-icon name="like-o" />{{item.likeNum}}
          </div>

          <div class="talk-box">
            <p>
              <span class="reply">{{item.commentContent}}</span>
            </p>
          </div>
          <div class="reply-box" >
            <div v-for="(reply,j) in item.reply" :key="j" class="author-title">
              <van-image
                  round
                  width="2.5rem"
                  height="2.5rem"
                  src="https://s1.328888.xyz/2022/09/05/1xPvN.png"
              />
              <div class="author-info">
                <span class="author-name" >{{reply.respondentNickname}}</span>
                <span class="author-time">{{reply.replyTime}}</span>
              </div>
              <div class="icon-btn">
                <span  @click="showReplyInput(i,reply.respondentNickname,reply.byRespondentId)" style="padding-right: 2px">
                  <van-icon name="chat-o" />{{reply.commentNum}}
                </span>
                <van-icon name="like-o" />
                {{reply.likeNum}}
              </div>
              <div class="talk-box">
                <p>
                  <span>回复 {{reply.byRespondentNickname}}:</span>
                  <span class="reply">{{reply.replyContent}}</span>
                </p>
              </div>
              <div class="reply-box">
              </div>
            </div>
          </div>
          <div  v-show="_inputShow(i)" class="my-reply my-comment-reply" >
<!--            <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>-->
            <div style="display: flex;
                  justify-content: center;
                  align-items: center;">
              <van-image
                  round
                  width="2.5rem"
                  height="2.5rem"
                  src="https://s1.328888.xyz/2022/09/05/1xPvN.png"
              />
              <div class="reply-info" >
                <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."   @input="onDivInput($event)"  class="reply-input reply-comment-input"></div>
              </div>
            </div>

            <div class=" reply-btn-box">
              <van-button class="reply-btn" size="small" @click="sendCommentReply(i)" type="info">发表评论</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>

    <!-- 写评论部分 -->
<!--    <van-action-sheet v-model="write_comment" title="写评论">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="25"
        placeholder="请输入评论"
        show-word-limit
      />
      <van-button text="发送" color="#64C0DF" block />
    </van-action-sheet>-->
    <van-share-sheet
      v-model="show_Share"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import {toQQ,toWeibo,toWechat,toQQzone} from "@/common/share";
import {Toast} from "vant";
import {mapGetters, mapState} from "vuex";

const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
  data() {
    return {
      comment: false,
      write_comment: false,
      message: null,
      show_Share: false,
      options: [
        [
          { name: "QQ", icon: "qq" },
          { name: "微信", icon: "wechat" },
          { name: "QQ空间", icon: "qq" },
          { name: "微博", icon: "weibo" },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      url: null,
      articleDetail: {},
      flag: true,
      icons: {},
      change: '',
      follow: true,

      btnShow: false,
      index: 0,
      replyComment:'',
      myName:'Lana Del Rey',
      myHeader:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
      myId:19870621,
      respondentNickname:'',
      byRespondentId:-1,
      comments:[
        /*{
          name:'Lana Del Rey',
          id:19870621,
          headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
          comment:'我发布一张新专辑Norman Fucking Rockwell,大家快来听啊',
          time:'2019年9月16日 18:43',
          commentNum:2,
          like:152,
          inputShow:false,
          reply:[
            {
              from:'Taylor Swift',
              fromId:19891221,
              fromHeadImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
              to:'Lana Del Rey',
              toId:19870621,
              comment:'我很喜欢你的新专辑！！',
              time:'2019年9月16日 18:43',
              commentNum:1,
              like:15,
              inputShow:false
            },
            {
              from:'Ariana Grande',
              fromId:1123,
              fromHeadImg:'https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg',
              to:'Lana Del Rey',
              toId:19870621,
              comment:'别忘记宣传我们的合作单曲啊',
              time:'2019年9月16日 18:43',
              commentNum:0,
              like:5,
              inputShow:false

            }
          ]
        },
        {
          name:'Taylor Swift',
          id:19891221,
          headImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
          comment:'我发行了我的新专辑Lover',
          time:'2019年9月16日 18:43',
          commentNum:1,
          like:5,
          inputShow:false,
          reply:[
            {
              from:'Lana Del Rey',
              fromId:19870621,
              fromHeadImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
              to:'Taylor Swift',
              toId:19891221,
              comment:'新专辑和speak now 一样棒！',
              time:'2019年9月16日 18:43',
              commentNum:25,
              like:5,
              inputShow:false

            }
          ]
        },
        {
          name:'Norman Fucking Rockwell',
          id:20190830,
          headImg:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg',
          comment:'Plz buy Norman Fucking Rockwell on everywhere',
          time:'2019年9月16日 18:43',
          commentNum:0,
          like:5,
          inputShow:false,
          reply:[]
        },*/
      ]
    };
  },
  directives: {clickoutside},
  created() {
    this.change = this.changeIcon.collectionIcon
    this.getArticleDetail()
    console.log('9999999999999999999')
  },
  computed: {
    ...mapState(['userinfo','changeIcon'])
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      const platformName = option.name
      switch (platformName) {
        case 'QQ':
          let title="需要分享的标题"
          let _url = 'https://www.baidu.com/';//自定义网站链接地址
          let url =  window.location.href;//获取当前网页地址

          toQQ(_url,title)
          break
        case '微信':
          toWechat(_url,title)
          break
        case '微博':
          toWeibo(_url,title)
          break
        case 'QQ空间':
          toQQzone(_url,title)
          break
      }
      this.showShare = false;
    },
    report(){
      this.$router.push("/homeview/share/sharepage/report")
    },
    arrow() {
      console.log("返回");
      history.go(-1)
    },
    getArticleDetail() {
      //接收
      this.url = this.$route.query.url
      const reUrl = "http://localhost:10" +
          "004/article/detail"
      const dat = {
         userId: this.$route.query.userId,
         articleId: this.$route.query.articleId,
        modelId: this.$route.query.moduleId,
      }
      console.log(dat,this.url)
      //请求
      this.axios.post(reUrl,dat).then(response =>{
        if(response.data.state==200){
          console.log("接受成功")
          this.articleDetail = response.data.data
          this.comments = this.articleDetail.commentList
          //拿回复列表
          const url = "http://localhost:10004/reply"
          for(let i = 0;i<this.comments.length;i++){
            //输入控制
            this.comments[i].inputShow = false
            //拿回复列表请求
            this.axios.get(url+"/"+this.comments[i].commentId+"/desc/"+1).then(response =>{
              if(response.data.state==200){
                // console.log("成功",response.data.data)
                this.comments[i].reply = response.data.data
                  for (let j = 0;j<this.comments[i].reply.length;j++){
                    this.comments[i].reply[j].inputShow = false;
                    // console.log(this.comments[i].reply[j].inputShow)
                  }
                  console.log('1111111111111111111',this.comments[i].reply)
              }else{
                console.log("失败")
              }
            })
          }
          console.log(response.data.data)
        }else {
          console.log("接受失败")
        }
      })
    },
    showComment(){
      this.comment = true

    },
    inputFocus(){
      const replyInput = document.getElementById('replyInput');
      replyInput.style.padding= "8px 8px"
      replyInput.style.border ="2px solid blue"
      replyInput.focus()
    },
    showReplyBtn(){
      this.btnShow = true
    },
    hideReplyBtn(){
      this.btnShow = false
      replyInput.style.padding= "10px"
      replyInput.style.border ="none"
    },
    showReplyInput(i,name,id){
      this.comments[this.index].inputShow = false
      this.index =i
      this.comments[i].inputShow = true
      console.log("状态"+this.comments[i].inputShow)
      this.respondentNickname = name
      this.btnShow = !this.btnShow
    },
    _inputShow(i){
      return this.comments[i].inputShow
    },
    sendComment(){
      if(!this.replyComment){
        this.$message({
          showClose: true,
          type:'warning',
          message:'评论不能为空'
        })
      }else{
        let a ={}
        let input =  document.getElementById('replyInput')
        let timeNow = new Date().getTime();
        let time= this.dateStr(timeNow);
        a.nickname = this.myName
        a.commentContent =this.replyComment
        a.avatar = this.myHeader
        a.commontTime = time
        a.replayNum = 0
        a.likeNum = 0
        this.comments.push(a)
        //添加评论
        const url = "http://localhost:10004/comment/add"
        const dat = {
          commenterId: this.userinfo.id,
          byCommentId: this.articleDetail.userId,
          articleId: this.articleDetail.articleId,
          commentContent: this.replyComment
        }
        console.log('userinfo:',dat)
        this.axios.post(url,dat).then(response => {
          if(response.data.state==200){
            console.log("成功"+response.data.data)
          }
        })
        this.replyComment = ''
        input.innerHTML = '';
      }
    },
    sendCommentReply(i){
      if(!this.replyComment){
        this.$message({
          showClose: true,
          type:'warning',
          message:'评论不能为空'
        })
      }else{
        console.log('444444444',this.comments[i].reply)
        let a ={}
        let timeNow = new Date().getTime();
        let time= this.dateStr(timeNow);
        a.respondentNickname= this.myName
        a.byRespondentNickname = this.comments[i].nickname
        a.respondentAvatar = this.myHeader
        a.replyContent =this.replyComment
        a.replyTime = time
        a.commentNum = 0
        a.likeNum = 0
        this.comments[i].reply.push(a)
        this.replyComment = ''
        document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
      }
    },
    onDivInput: function(e) {
      this.replyComment = e.target.innerHTML;
    },
    dateStr(date){
      //获取js 时间戳
      var time=new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time=parseInt((time-date)/1000);
      //存储转换值
      var s;
      if(time<60*10){//十分钟内
        return '刚刚';
      }else if((time<60*60)&&(time>=60*10)){
        //超过十分钟少于1小时
        s = Math.floor(time/60);
        return  s+"分钟前";
      }else if((time<60*60*24)&&(time>=60*60)){
        //超过1小时少于24小时
        s = Math.floor(time/60/60);
        return  s+"小时前";
      }else if((time<60*60*24*30)&&(time>=60*60*24)){
        //超过1天少于30天内
        s = Math.floor(time/60/60/24);
        return s+"天前";
      }else{
        //超过30天ddd
        var date= new Date(parseInt(date));
        return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
      }
    },
    Like(){
      if(this.flag==true){
        this.flag=!this.flag
        this.articleDetail.articleLike += 1
      }else{
        this.flag=!this.flag
        this.articleDetail.articleLike -= 1
      }

    },
    Collection(){
      if(this.change=='star-o'){
        //收藏
        const url = "http://localhost:10002/ums/Collect/collection"
        const userId = this.userinfo.id
        console.log('userId:',userId)
        const articleId = this.articleDetail.articleId
        //请求收藏
        this.axios.post(url+"?userId="+userId+"&articleId="+articleId).then(response => {
          if(response.data.state==200){
            /*this.getArticleDetail()*/
            //请求收藏数
            console.log("articleId:{}",this.articleDetail.articleId)
            this.axios.get("http://localhost:10002/ums/Collect/getCollectionNum?articleId="+this.articleDetail.articleId).then(response =>{
              console.log(response.data)
              this.articleDetail.articleCollection = response.data.data
              this.changeIcon.collectionIcon = 'star'
              this.$store.commit('updateChangeIcon',this.changeIcon)
              this.change = this.changeIcon.collectionIcon
            })

          }else {
            Toast("服务器繁忙")
          }
        })
      }else{
        const url = "http://localhost:10002/ums/Collect/notCollection"
        //取消收藏
        const userId = this.userinfo.id
        console.log('userId:',userId)
        const articleId = this.articleDetail.articleId
        //请求取消收藏
        this.axios.post(url+"?userId="+userId+"&articleId="+articleId).then(response => {
          if(response.data.state==200){
            //请求收藏数
            this.axios.get("http://localhost:10002/ums/Collect/getCollectionNum?articleId="+this.articleDetail.articleId).then(response =>{
              console.log(response.data)
              this.articleDetail.articleCollection = response.data.data
              this.changeIcon.collectionIcon = 'star-o'
              this.$store.commit('updateChangeIcon',this.changeIcon)
              this.change = this.changeIcon.collectionIcon
            })

          }else {
            Toast("服务器繁忙")
          }
        })
      }
    },
    Follow() {
      if(this.follow==true){
        const url = 'http://localhost:10002/ums/Attention/attention'
        this.axios.post(url+"?userId="+this.userinfo.id+"&followUserId="+this.$route.query.userId).then(response =>{
          if(response.data.state==200){
            console.log("关注成功")
            this.follow=false;
          }else {
            console.log(response.data.data)
          }
        })

      }else {
        //取消关注请求
        const url = 'http://localhost:10002/ums/Attention/notAttention'
        this.axios.post(url+"?userId="+this.userinfo.id+"&followUserId="+this.$route.query.userId).then(response =>{
          if(response.data.state==200){
            console.log("取消关注成功")
            this.follow=true;
          }else {
            console.log(response.data.data)
          }
        })
      }
    }
  },
};
</script>

<style lang="stylus" scoped>
.my-reply
  padding 5px 5px 5px 0px
  background-color #fafbfc
  .header-img
    display inline-block
    vertical-align top
 .reply-info
   display inline-block
   margin-left 5px
   width 90%
   @media screen and (max-width:1200px) {
     width 80%
   }
  .reply-input
    min-height 20px
    line-height 22px
    padding 10px 10px
    color #ccc
    background-color #fff
    border-radius 5px
    &:empty:before
      content attr(placeholder)
    &:focus:before
      content none
    &:focus
      padding 8px 8px
      border 2px solid blue
      box-shadow none
      outline none
  .reply-btn-box
    height 25px
    margin 10px 0
    .reply-btn
      position relative
      float right
      margin-right 15px
.my-comment-reply
  margin-left 50px
  .reply-input
    width flex
.author-title:not(:last-child)
  border-bottom: 1px solid rgba(178,186,194,.3)
.author-title
  padding 10px
  .header-img
    display inline-block
    vertical-align top
  .author-info
    display inline-block
    margin-left 5px
    width 60%
    height 40px
    line-height 20px
    >span
      display block
      cursor pointer
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
    .author-name
      color #000
      font-size 18px
      font-weight bold
    .author-time
      font-size 14px
  .icon-btn
    width 30%
    padding 0 !important
    float right
    @media screen and (max-width : 1200px){
      width 20%
      padding 7px
    }
    >span
      cursor pointer
    .iconfont
      margin 0 5px
  .talk-box
    margin 0 50px
    >p
      margin 0
    .reply
      font-size 16px
      color #000
  .reply-box
    margin 10px 0px 0 20px
    background-color #efefef
.personal
  display flex
  justify-content center
  align-items center

.content
  margin 10px 11px
  display fle
  flex-direction column
  justify-content center
  align-items flex-start

.content p
  margin 6px
  font-size 19px

.content img
  max-width 100%

.time
  margin 0 11px
  font-size 15px
  color #969799

</style>